<script lang="ts" setup>
import type { Dayjs } from 'dayjs';

import { computed, onMounted, ref } from 'vue';

import { AnalysisOverview } from '@vben/common-ui';

import dayjs from 'dayjs';

// 引入全局配置
import { DatePicker } from 'ant-design-vue';

import { getFinanceCount } from '#/api';

import AnalyticsTrends from './components/analytics-trends.vue';

interface Finance {
  incomeTotalAmount: null | number;
  monthlyIncomeTotalAmount: null | number;
  monthlyPaidTotalAmount: null | number;
  monthlyRefundAmount: null | number;
  paidTotalAmount: null | number;
  refundAmount: null | number;
  todayOrderAmount: null | number;
  yesterdayOrderAmount: null | number;
}

const finance = ref<Finance>({
  incomeTotalAmount: 0,
  monthlyIncomeTotalAmount: 0,
  monthlyPaidTotalAmount: 0,
  monthlyRefundAmount: 0,
  paidTotalAmount: 0,
  refundAmount: 0,
  todayOrderAmount: 0,
  yesterdayOrderAmount: 0,
});

const overviewItems = computed(() => {
  return [
    {
      title: '累计总支付金额(元)',
      value: finance.value?.paidTotalAmount || 0,
      totalTitle: '本月',
      totalValue: finance.value?.monthlyPaidTotalAmount || 0,
      decimals: 2,
    },
    {
      title: '酒店累计收入(元)',
      value: finance.value?.incomeTotalAmount || 0,
      totalTitle: '本月',
      totalValue: finance.value?.monthlyIncomeTotalAmount || 0,
      decimals: 2,
    },
    {
      title: '售后退款金额(元)',
      value: finance.value?.refundAmount || 0,
      totalTitle: '本月',
      totalValue: finance.value?.monthlyRefundAmount || 0,
      decimals: 2,
    },
    {
      title: '今日下单金额(元)',
      value: finance.value?.todayOrderAmount || 0,
      totalTitle: '昨日',
      totalValue: finance.value?.yesterdayOrderAmount || 0,
      decimals: 2,
    },
  ];
});

const date = ref<Dayjs>();
const dataStr = ref<string>();

// 禁用超过当月的日期
const disabledDate = (current: Dayjs) => {
  if (!current) return false;
  // 获取当前月份的最后一天
  const lastDayOfCurrentMonth = dayjs().endOf('month');
  return current.isAfter(lastDayOfCurrentMonth, 'month');
};

// 获取财务概况数据
const getFinance = async () => {
  try {
    const { data } = await getFinanceCount();
    finance.value = data || finance.value;
  } catch (error) {
    console.error('获取财务概况失败：', error);
  }
};

// 日期回调
const handleDate = () => {
  dataStr.value = date.value?.format('YYYY-MM') || '';
};

onMounted(() => {
  getFinance();
});
</script>

<template>
  <div class="absolute bottom-0 right-0 h-[100%] w-[100%] overflow-hidden">
    <div class="flex h-[100%] w-[100%] flex-col overflow-auto p-5 pt-4">
      <div class="mb-4 text-xl font-bold">财务概况</div>
      <AnalysisOverview :items="overviewItems" />
      <div class="card-box my-3 flex w-full flex-wrap items-center p-3">
        <p>月份筛选：</p>
        <DatePicker
          v-model:value="date"
          :disabled-date="disabledDate"
          class="h-[40px]"
          picker="month"
          @change="handleDate"
        />
      </div>

      <div class="card-box w-full flex-wrap pb-6 pl-1 pr-2 pt-3">
        <div class="mb-4 pl-2 text-lg">订单走势图</div>
        <AnalyticsTrends :date="dataStr" />
      </div>
    </div>
  </div>
</template>
